<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css"  media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/plugins/font-awesome-4.7.0/css/font-awesome.min.css"  media="all">
    <script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>
</head>
<body>
<button type="button" class="layui-btn" id="insert">批量添加</button>
<button type="button" class="layui-btn" id="select">批量下载</button>
<button type="button" class="layui-btn" id="addbut">添加</button>
<form class="layui-form" id="addform" style="display: none">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" placeholder="请输入" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <input type="text" name="image" placeholder="请输入" id="img" class="layui-input">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">法号</label>
        <div class="layui-input-block">
            <input type="text" name="nickName" placeholder="请输入" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSub">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table','layer','upload','form'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var upload = layui.upload;
        var form = layui.form;
        var $ = layui.$;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 500
            ,url: '${pageContext.request.contextPath}/guru/selectAll' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80}
                ,{field: 'name', title: '姓名', width:150}
                ,{field: 'image', title: '图像', width:120,templet: function(d){
                            return '<img src="/cmfz/'+d.image+'"/>'
                }}
                ,{field: 'nickName', title: '法号', width:120}
                ,{field: 'status', title: '状态', width:120,templet: function(d){
                    if (d.status==0){
                        return '<span>正常</span>'
                     } else{
                        return '<span>已冻结</span>'
                    }
                    }}
                ,{fixed: 'right', title: '操作', width: 135, toolbar: '#barDemo'}
            ]]
        });
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            console.log(data)
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    layer.close(index);
                    $.ajax({
                        url:"/cmfz/guru/delete"
                        ,data:"id="+data.id+"&status="+data.status
                        ,success:function (result) {
                            if(result.flag){
                                layer.msg("冻结成功")
                            }else {
                                layer.msg("冻结失败")
                            }
                            table.reload('demo', {
                                url: '/cmfz/guru/selectAll'
                            });
                        }
                    })
                });
            } else if(layEvent === 'edit'){ //编辑
            }
        });
        //----------添加-------------
        var index;
        $("#addbut").click(function () {
            index = layer.open({
                type: 1,
                content: $("#addform")
                ,skin: 'demo-class'
                ,area: ['500px', '300px']
            });
        })
        form.on('submit(addSub)', function(data){
            console.log(data)
            $.ajax({
                url:'/cmfz/guru/insert'
                ,data:data.field
                ,success:function (result) {
                    if (result.flag){
                        layer.msg("添加成功")
                    } else {
                        layer.msg("添加失败")
                    }
                    $("#addform")[0].reset();
                    table.reload('demo', {
                        url: '/cmfz/guru/selectAll'
                    });
                    layer.close(index);
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //----------文件上传-------------
        upload.render({
            elem: '#test1' //绑定元素
            ,url: '/cmfz/guru/addImg'//上传接口
            ,done: function(res){
                $("#img").val(res.flag)
            }
        })
        //----------文件上传-------------
        //----------批量添加-------------
        upload.render({
            elem: '#insert' //绑定元素
            ,url: '/cmfz/guru/piliInsert'   //上传接口
            ,auto:true
            ,accept:"file"
            ,exts:"xlsx|xls"
            ,done: function(res){

            }
        })
        //----------批量添加-------------
        //----------下载按钮-------------
        $("#select").click(function () {
            window.location.href="${pageContext.request.contextPath}/guru/select?id="+1
        })
        //----------下载按钮-------------
    });
</script>
</body>
</html>
